<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="css/font-awesome/css/all.css" rel="stylesheet">
  <script src="js/index.js"></script>
</head>
<body>
  <div class="menu-btn">
    <i class="fas fa-bars fa-2x"></i>
  </div>

  <div class="container">
    <!-- Nav -->
    <nav class="main-nav">
      <img src="img/logo.png" alt="Microsoft" class="logo">

      <ul class="main-menu">
        <li><a href="#">Office</a></li>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Surface</a></li>
        <li><a href="#">Xbox</a></li>
        <li><a href="#">Deals</a></li>
        <li><a href="#">Support</a></li>
      </ul>

      <ul class="right-menu">
        <li>
          <a href="#">
            <i class="fas fa-search"></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-shopping-cart"></i>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Showcase -->
    <header class="showcase">
      <h2>Surface Deals</h2>
      <p>
        Select Surfaces are on sale now - save while supplies last
      </p>
      <a href="#" class="btn">
        Shop Now <i class="fas fa-chevron-right"></i>
      </a>
    </header>

    <!-- Home cards 1 -->
    <section class="home-cards">
      <div>
        <img src="img/card1.png" alt="">
        <h3>New Surface Pro 7</h3>
        <p>
          See how Katie Sowers, Asst. Coach for the 49ers, uses Surface Pro 7
            to put her plans into play.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div>
        <img src="img/card2.png" alt="" />
        <h3>New Surface Laptop 3</h3>
        <p>
          Express yourself powerfully with a thin, light, and elegant design,
          faster performance, and up to 11.5 hours battery life.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div>
        <img src="img/card3.png" alt="" />
        <h3>Save $150 + free controller</h3>
        <p>
          Buy an Xbox One X console and double your fun with a free select
          extra controller. Starting at $349.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
      <div>
        <img src="img/card4.png" alt="" />
        <h3>The new Microsoft Edge</h3>
        <p>
          Expect more. World class performance, with more privacy, more
          productivity, and more value.
        </p>
        <a href="#">Learn More <i class="fas fa-chevron-right"></i></a>
      </div>
    </section>

    <!-- Xbox -->
    <section class="xbox">
      <div class="content">
        <h2>Xbox Game Pass Ultimate</h2>
        <p>Xbox Game Pass Ultimate Xbox Live Gold and over 100 high-quality
          console and PC games. Play together with friends and discover your
          next favorite game.</p>
          <a href="#" class="btn">
            Join Now <i class="fas fa-chevron-right"></i>
          </a>
      </div>
    </section>

    <!-- Home cards 2 -->
      <section class="home-cards">
        <div>
          <img src="img/card5.png" alt="" />
          <h3>Microsoft Teams</h3>
          <p>
            Unleash the power of your team.
          </p>
          <a href="#">Shop Now <i class="fas fa-chevron-right"></i></a>
        </div>
        <div>
          <img src="img/card6.jpg" alt="" />
          <h3>Unlock the power of learning</h3>
          <p>
            Get students future-ready with Windows 10 devices. Starting at $219.
          </p>
          <a href="#">Shop Now <i class="fas fa-chevron-right"></i></a>
        </div>
        <div>
          <img src="img/card7.png" alt="" />
          <h3>Windows 10 Enterprise</h3>
          <p>
            Download the free 90-day evaluation for IT professionals.
          </p>
          <a href="#">Download Now <i class="fas fa-chevron-right"></i></a>
        </div>
        <div>
          <img src="img/card8.png" alt="" />
          <h3>Explore Kubernetes</h3>
          <p>
            Learn how Kubernetes works and get started with cloud native app
            development today.
          </p>
          <a href="#">Get Started <i class="fas fa-chevron-right"></i></a>
        </div>
      </section>
      
      <!-- Carbon -->
      <section class="carbon dark">
        <div class="content">
          <h2>Commiting To Carbon Negative</h2>
          <p>Microsoft will be carbon negative by 2030 and by 2050 we will remove
            all carbon the company has emitted since it was founded in 1975</p>
            <a href="#" class="btn">
              Learn More <i class="fas fa-chevron-right"></i>
            </a>
        </div>
      </section>

      <!-- Follow -->
      <section class="follow">
        <p>Follow Microsoft</p>
        <a href="https://facebook.com">
          <img src="img/social-fb.png" alt="Facebook">
        </a>
        <a href="https://twitter.com">
          <img src="img/social-twitter.png" alt="Twitter">
        </a>
        <a href="https://linkedin.com">
          <img src="img/social-linkedin.png" alt="Linkedin">
        </a>
      </section>
    </div>
      <!-- Links -->
      <section class="links">
        <div class="links-inner">
          <ul>
            <li><h3>What's New</h3></li>
            <li><a href="#">Surface Pro X</a></li>
            <li><a href="#">Surface Laptop 3</a></li>
            <li><a href="#">Surface Pro 7</a></li>
            <li><a href="#">Windows 10 apps</a></li>
            <li><a href="#">Office apps</a></li>
          </ul>
          <ul>
            <li><h3>Microsoft Store</h3></li>
            <li><a href="#">Account Profile</a></li>
            <li><a href="#">Download Center</a></li>
            <li><a href="#">Microsoft Store support</a></li>
            <li><a href="#">Returns</a></li>
            <li><a href="#">Older tracking</a></li>
          </ul>
          <ul>
            <li><h3>Education</h3></li>
            <li><a href="#">Microsfot in education</a></li>
            <li><a href="#">Office for students</a></li>
            <li><a href="#">Office 365 for schools</a></li>
            <li><a href="#">Deals for studentss</a></li>
            <li><a href="#">Microsfot Azure</a></li>
          </ul>
          <ul>
            <li><h3>Enterprise</h3></li>
            <li><a href="#">Azure</a></li>
            <li><a href="#">AppSource</a></li>
            <li><a href="#">Automotive</a></li>
            <li><a href="#">Government</a></li>
            <li><a href="#">Healthcare</a></li>
          </ul>
          <ul>
            <li><h3>Developer</h3></li>
            <li><a href="#">Visual Studio</a></li>
            <li><a href="#">Windowszs Dev Center</a></li>
            <li><a href="#">Developer Network</a></li>
            <li><a href="#">TechNet</a></li>
            <li><a href="#">Microsoft Developer</a></li>
          </ul>
          <ul>
            <li><h3>Company</h3></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">About Microsoft</a></li>
            <li><a href="#">Company news</a></li>
            <li><a href="#">Privacy at Microsoft</a></li>
            <li><a href="#">Inverstors</a></li>
          </ul>
        </div>
      </section>

      <!-- Footer -->
      <footer class="footer">
        <div class="footer-inner">
          <div><i class="fas fa-globe fa-2x"></i> English (United States)</div>
          <ul>
            <li><a href="#">Sitemap</a></li>
          <li><a href="#">Contact Microsoft</a></li>
          <li><a href="#">Privacy & cookies</a></li>
          <li><a href="#">Terms of use</a></li>
          <li><a href="#">Trademarks</a></li>
          <li><a href="#">Safety & eco</a></li>
          <li><a href="#">About our ads</a></li>
          <li><a href="#">&copy; Microsoft 2020</a></li>
          </ul>
        </div>
      </footer>
</body>
</html>
 